import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cook_dinner/config/include.dart';

const List<String> history = ['意大利青酱', '滋味意面', '蓬松饼'];
const List<String> topic = [
  '#老爸老妈做的菜',
  '#晒出我的拿手好菜',
  '#这些饮料真是绝了',
  '#我的烘焙日记',
  '#宝妈的营养攻略',
  '#最好吃的蛋糕',
];
const List<String> tabList = ['家常菜', '煲汤', '川菜', '面食', '烘焙'];

class SearchHistory extends StatefulWidget {
  const SearchHistory({Key? key}) : super(key: key);

  @override
  State<SearchHistory> createState() => _SearchHistoryState();
}

class _SearchHistoryState extends State<SearchHistory> {
  int curetIndex = 0;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: HYSizeFit.screenWidth,
      child: Column(
        children: [
          Padding(
            padding: EdgeInsets.only(top: 25.rpx, left: 28.rpx, right: 28.rpx),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '历史搜索',
                      style: TextStyle(
                        fontSize: 18.rpx,
                        color: const Color(0xff333333),
                      ),
                    ),
                    InkWell(
                      child: Image.asset('assets/images/delete.png',
                          height: 26.rpx),
                    ),
                  ],
                ),
                SizedBox(height: 12.rpx),
                Wrap(
                  alignment: WrapAlignment.start,
                  runAlignment: WrapAlignment.start,
                  spacing: 10.rpx,
                  children: List.generate(
                    history.length,
                    (index) => Container(
                      height: 37.rpx,
                      alignment: Alignment.center,
                      padding: EdgeInsets.symmetric(horizontal: 12.rpx),
                      constraints: BoxConstraints(maxWidth: 115.rpx),
                      decoration: BoxDecoration(
                        color: const Color(0xffFA8303).withOpacity(0.2),
                        borderRadius: BorderRadius.circular(19.rpx),
                      ),
                      child: Text(
                        history[index],
                        style: TextStyle(
                          fontSize: 18.rpx,
                          color: const Color(0xff999999),
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(height: 24.rpx),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '热门话题',
                      style: TextStyle(
                        fontSize: 18.rpx,
                        color: const Color(0xff333333),
                      ),
                    ),
                    InkWell(
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text(
                            '查看更多',
                            style: TextStyle(
                              fontSize: 16.rpx,
                              color: const Color(0xff999999),
                            ),
                          ),
                          SizedBox(width: 5.rpx),
                          Image.asset('assets/images/arrat_right.png',
                              height: 10.rpx),
                        ],
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 19.rpx),
                Wrap(
                  children: List.generate(
                    topic.length,
                    (index) {
                      return Container(
                        padding: EdgeInsets.only(
                            right: 5.rpx, left: index % 2 == 1 ? 27.rpx : 0),
                        margin: EdgeInsets.only(bottom: 17.2.rpx),
                        width: (HYSizeFit.screenWidth - 56.rpx) / 2,
                        decoration: BoxDecoration(
                          border: Border(
                            left: BorderSide(
                              width: index % 2 == 1 ? 1.rpx : 0,
                              color: index % 2 == 1
                                  ? const Color(0xffcccccc)
                                  : Colors.transparent,
                            ),
                          ),
                        ),
                        child: Row(
                          children: [
                            Text(
                              '${index + 1}',
                              style: TextStyle(
                                color: index < 3
                                    ? const Color(0xffFF4D4D)
                                    : const Color(0xffE0A979),
                                fontSize: 16.rpx,
                              ),
                            ),
                            SizedBox(width: 5.rpx),
                            Expanded(
                              child: Text(
                                topic[index],
                                style: TextStyle(
                                  color: const Color(0xff333333),
                                  fontSize: 16.rpx,
                                ),
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                              ),
                            ),
                          ],
                        ),
                      );
                    },
                  ),
                ),
                Container(
                  height: 43.rpx,
                  margin: EdgeInsets.only(top: 23.rpx, bottom: 30.rpx),
                  child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: tabList.length,
                    itemBuilder: (context, index) {
                      return InkWell(
                        onTap: () {
                          setState(() {
                            curetIndex = index;
                          });
                        },
                        child: Container(
                          height: 43.rpx,
                          padding: EdgeInsets.symmetric(horizontal: 20.rpx),
                          margin: EdgeInsets.only(right: 8.rpx),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(22.rpx),
                            color: curetIndex == index
                                ? const Color(0xffFA8303)
                                : const Color(0xffE8E8E8),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            tabList[index],
                            style: TextStyle(
                              fontSize: 20.rpx,
                              color: curetIndex == index
                                  ? Colors.white
                                  : const Color(0xff808080),
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
